<template>
  <div class="video">
    <div class="item" v-for="item in arr" :key="item.id">
      <div class="videoplayer">
        <div class="title">{{ item.title }}</div>
        <video :src="item.video.url"></video>
        <div class="play" @click="playVideo"></div>
        <div class="info-bar">
          <div class="time">{{ item.video.dur | dur }}</div>
        </div>
        <img src="" alt="" />
      </div>
      <div class="video-info">
        <div class="user">
          <img :src="item.user.avatarurl" alt="" class="user-avatar" />
          <div class="user-nickname">{{ item.user.nickName }}</div>
        </div>
        <div class="share">
          <div class="praise">{{ item.upCount }}</div>
          <div class="comment">{{ item.commentCount }}</div>
          <div class="video-share"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Video",
  data() {
    return {
      arr: [],
      on: false,
    };
  },
  filters: {
    dur(s) {
      let m = (Math.floor(s / 60) + "").padStart(2, "0");
      let ss = ((s % 60) + "").padStart(2, "0");
      return `${m}:${ss}`;
    },
  },
  async created() {
    let res = await this.$axios.get(
      "/asgard/asgardapi/sns/common/feed/channel/list.json?uuid=4BD02870EB8A11EC9484CD3F2669A797DC32D9AD09E2495099517F7338AC2AD0&channelId=4&feedChannelId=0&timestamp=1658544386041&offset=15"
    );
    this.arr = res.data.data.feeds;
  },
  methods: {
    playVideo() {},
  },
};
</script>

<style lang="less" scoped>
.video {
  width: 10rem;
  height: auto;
  .item {
    width: 10rem;
    height: 6.8533rem;
    margin-bottom: 0.16rem;
    .videoplayer {
      width: 10rem;
      height: 5.6267rem;
      position: relative;
      .title {
        position: absolute;
        top: 0;
        z-index: 11;
        font-size: 17px;
        color: #fff;
        margin: 9px 15px 19px;
      }
      .play {
        position: absolute;
        width: 58px;
        height: 58px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url("@/assets/img/play.png") no-repeat 0;
        background-size: contain;
      }
      .info-bar {
        position: relative;
        width: 10rem;
        height: 30px;
        bottom: 34px;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
        .time {
          width: 30px;
          height: 30px;
          position: absolute;
          bottom: -8px;
          right: 0;
          color: #fff;
          margin-right: 10px;
        }
      }

      video {
        width: 100%;
      }
    }
    .video-info {
      width: 9.6rem;
      height: 1.2267rem;
      padding-left: 0.4rem;
      display: flex;
      justify-content: space-between;
      .user {
        width: auto;
        height: 1.2267rem;
        display: flex;
        align-items: center;
        .user-avatar {
          width: 0.5867rem;
          height: 0.5867rem;
          border-radius: 50%;
        }
        .user-nickname {
          width: auto;
          height: 0.56rem;
          margin-left: 0.16rem;
          color: #666;
          font-size: 14px;
        }
      }
      .share {
        width: 4.32rem;
        height: 1.2267rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .praise {
          width: 1.28rem;
          height: 0.9333rem;
          background: url("@/assets/img/video-praise.png") no-repeat 0;
          background-size: 0.5rem 0.5rem;
          font-size: 0.24rem;
          line-height: 35px;
          text-align: right;
        }
        .comment {
          width: 0.9333rem;
          height: 0.9333rem;
          background: url("@/assets/img/video-comment.png") no-repeat 0;
          font-size: 0.24rem;
          line-height: 35px;
          text-align: right;
          background-size: 0.5rem 0.5rem;
        }
        .video-share {
          width: 33px;
          height: 0.9333rem;
          background: url("@/assets/img/video-share.png") no-repeat 0;
          font-size: 0.24rem;
          line-height: 35px;
          text-align: right;
          background-size: 0.5rem 0.5rem;
        }
      }
    }
  }
}
</style>